<template>
    <div class="mychar" :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
export default {
    props: {
        id: {
            type: String,
            default: "myChart",
        },

        width: {
            type: String,
            default: "300px",
        },

        height: {
            type: String,
            default: "300px",
        },

        item: {
            type: Object,
            default: () => {},
        },
    },

    data() {
        return {
            items: {
                name: [],
                date: [],
                inflows: [], //净流入
                inflows_bulk: [], //主力净额
            }, //数据源
        };
    },

    methods: {
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById(this.id));
            // 绘制图表

            myChart.setOption({
                title: {
                    text: "主力净额",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.item.name,
                    type: "scroll",
                    width: 800,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.item.date,
                },
                yAxis: {
                    type: "value",
                },
                series: this.item.inflows_bulk,
            });
        },
    },

    mounted() {
        this.drawLine();
    },
};
</script>

<style lang="scss" scoped></style>
